<!--
 * @Descripttion:
 * @version: v1
 * @Author: youhujun 2900976495@qq.com
 * @Date: 2024-09-12 16:44:05
 * @LastEditors: youhujun 2900976495@qq.com
 * @LastEditTime: 2024-09-15 11:38:38
 * @FilePath: \src\pages\youhu\v1\goods\goodsGroup\goodsList\component\tableInfo\goodsCheck\goodsCheckLogTable.vue
-->
<template>
  <div>
    <el-table
      ref="goodsCheckLogTable"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :data="goodsCheckLogList"
      border
      stripe
      highlight-current-row
      empty-text
      fit
      height="70vh"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        align="center"
        width="55"
      />
      <el-table-column
        label="序号"
        type="index"
        width="55"
        align="center"
        fixed
      />
      <el-table-column
        align="center"
        prop="apply_type"
        label="	申请者类型 "
        width="200"
      >
        <template slot-scope="scope">
          <el-tag v-show="scope.row.apply_type== 10" type="info">平台 </el-tag>
          <el-tag v-show="scope.row.apply_type== 20" type="info">服务者</el-tag>
          <el-tag v-show="scope.row.apply_type== 30" type="info">店铺</el-tag>
          <el-tag v-show="scope.row.apply_type== 40" type="info">工厂|代理</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="status"
        label="	申请状态 "
        width="150"
      >
        <template slot-scope="scope">
          <el-tag v-show="scope.row.status== 10" type="primary">申请中</el-tag>
          <el-tag v-show="scope.row.status== 20" type="success">通过</el-tag>
          <el-tag v-show="scope.row.status== 30" type="danger">拒绝</el-tag>

        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="check_apply_at"
        label="申请时间"
        width="200"
      />
      <el-table-column
        align="center"
        prop="check_at"
        label="审核时间"
        min-width="200"
      />
      <el-table-column
        align="center"
        prop="refuse_info"
        label="拒绝原因"
        min-width="150"
      />
      <el-table-column label="操作" align="center" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status === 10"
            size="mini"
            type="primary"
            plain
            @click="handleToCheckAllow(scope.$index, scope.row)"
          >通过
          </el-button>
          <el-button
            v-if="scope.row.status === 10"
            size="mini"
            type="danger"
            el-button
            @click="handleToCheckRefuse(scope.$index, scope.row)"
          >拒绝
            <!-- 删除(禁用)结束 -->
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { checkGoods } from '@/api/youhu-shop/V1/goods/goodsCheck'
export default
{
  // 组件名称
  name: 'GoodsCheckLogTable',
  // 组件
  components:
    {
    },
  props:
    {
      loading: {
        type: Boolean,
        default: true
      },
      goodsCheckLogList: {
        type: Array,
        default: () =>
        {
          return []
        }
      },
      dialogVisible: {
        type: Boolean,
        default: false
      },
      dialogTitle: {
        type: String,
        default: ''
      },
      dialogType: {
        type: Number,
        default: 1
      },
      reverse: {
        type: Number,
        default: 0
      },
      multipleDelete: {
        type: Number,
        default: 0
      },
      multipleDisable: {
        type: Number,
        default: 0
      }
    },
  // 数据
  data()
  {
    return {
      baseUrl: '',
      // 选中队象的数组
      multipleSelection: [],
      // 选中元素的下标
      selectIndex: [],
      // 反选元素的下标
      diffIndex: [],
      // 选中的下标
      selectId: []
    }
  },
  // 计算属性
  computed:
  {
  },
  // 监听
  watch:
  {
    reverse(value)
    {
      this.diffIndex = []

      const all = []

      for (let index = 0; index < this.goodsCheckLogList.length; index++)
      {
        all.push(index)
      }

      this.diffIndex = all.filter(val =>
      {
        return !this.selectIndex.includes(val)
      })

      // 实现反选的效果
      this.$refs.replaceTable.clearSelection()
      this.diffIndex.forEach(index =>
      {
        this.$refs.replaceTable.toggleRowSelection(this.goodsCheckLogList[index])
      })

      this.selectIndex = this.diffIndex
    }
  },
  // 实例创建之前
  beforeCreate()
  {
  },
  // 创建
  created()
  {
  },
  // 挂载之前
  beforeMount()
  {
  },
  // 挂载 --常用
  mounted()
  {
    this.baseUrl = process.env.VUE_APP_URL
  },
  // 更新之前
  beforeUpdate()
  {
  },
  // 跟新后
  updated()
  {
  },
  // 销毁之前
  beforeDestroy()
  {
  },
  // 销毁后
  destroyed()
  {
  },
  // 方法
  methods:
  {
    /**
         * 过滤管理员状态
         */
    filterReplaceStatus(value, row)
    {
      return row.is_default === value
    },

    // 审核通过
    handleToCheckAllow(index, row)
    {
      const _this = this
      this.$confirm('确认审核通过商品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() =>
      {
        const param = { id: row.id, check_type: 10 }
        checkGoods(param).then(res =>
        {
          if (res && res.code === 0)
          {
            _this.$message({
              type: 'success',
              message: res.msg
            })

            // _this.$emit('hanldeUpdateData', true)
            _this.event.$emit('updateGoodsProperty', true)
          }
        })
      }).catch(() =>
      {
        _this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 审核拒绝
    handleToCheckRefuse(index, row)
    {
      const _this = this

      this.$prompt('确认审核不通过商品', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^.+$/,
        inputErrorMessage: '拒绝原因不能为空'
      }).then(({ value }) =>
      {
        const param = { id: row.id, check_type: 20, refuse_info: value }
        checkGoods(param).then(res =>
        {
          if (res && res.code === 0)
          {
            _this.$message({
              type: 'success',
              message: res.msg
            })

            _this.$emit('hanldeUpdateData', true)
            _this.event.$emit('updateGoodsProperty', true)
          }
        })
      }).catch(() =>
      {
        _this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

    // 多选
    handleSelectionChange(val)
    {
      this.multipleSelection = val

      this.selectIndex = []
      this.multipleSelection.forEach(item =>
      {
        this.selectIndex.push(this.goodsCheckLogList.indexOf(item))
      })
    },
    // 获取选中下标
    getSelectId()
    {
      this.selectIndex.forEach(item =>
      {
        this.selectId.push(this.goodsCheckLogList[item].id)
      })
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
